<!--
 * @Descripttion: 说明
 * @version: V1.0
 * @Author: fgz
 * @Date: 2021-10-25 11:53:51
 * @LastEditors: fgz
 * @LastEditTime: 2021-10-25 17:53:50
-->
<template>
  <div class="number-container d-flex justify-content-center align-items-center">
    <!-- 减 1的按钮 -->
    <button class="btn btn-light btn-sm" type="button" @click="sub">-</button>
    <!-- 购买数量 -->
    <span class="number-box">{{num}}</span>
    <!-- 加 1的按钮 -->
    <button class="btn btn-light btn-sm" type="button" @click="add">+</button>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
  name: '',
  components: {},
  props: {
    // 接收商品的id值， 将来，使用EventBus方案， 把数量传递到App.vue的时候，需要通知App组件，更新哪个商品的数量
    id: {
      type: Number,
      require: true
    },
    // 接收到的num 数量值
    num: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击按钮，数值 +1
    add(e){
      // 要发送给App 的数据格式为 {id, value}
      // 其中，id 是商品的id, value是商品最新的购买数量
      const obj = {id:this.id, value: this.num+ 1}
      // 通过EventBus把obj对象，发送给 App.vue 组件
      bus.$emit('share',obj)
    },
    sub(e){
      const obj = {id:this.id, value: this.num- 1}
      // 通过EventBus把obj对象，发送给 App.vue 组件
      bus.$emit('share',obj)
    }
  },
  mounted(){},
}
</script>

<style lang='less' scoped>
.number-box {
  min-width: 30px;
  text-align: center;
  margin: 0 5px;
  font-size: 12px;
}
</style>
